<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
	<title>Design</title>  
	<link rel="stylesheet" type="text/css" href="style/works.css" />
  </head>
  
  <body>
  <!--The header of the index page.-->
	<div id="header">
	
	  <div id="nav">
	    <div  id="mylogo">
	      <img src="img/1011.png" />
		</div>
		
	    <ul id="navbar">
		   <li><a href="index.html" class="navlink">首页</a></li>
		   <li><a href="blog.html" class="navlink">文章</a></li>
		   <li><a href="gallery.html" class="navlink">作品</a></li>
		   <li><a href="about.html" class="navlink">关于</a></li>
		</ul>
	  </div>
	  <a href="https://github.com/"  id="githublogo"><img src="img/icon-github.png" /></a>
	</div>
	
	<!--主体部分-->
    <div id="mainsection">
	   <div id="tabsection">
	   
	       <ul id="alignnavbar">
		      <li class="tablist"><a href="#" class="tablink" id="firstlink">ALL</a></li>
			  <li class="tablist">
			     <a href="#" class="tablink">JavaScript Util Functions</a>
			     <ul class="downlist">
				    <li><a href="#" class="downlink">Title</a></li>
					<li><a href="#" class="downlink">Title</a></li>
					<li><a href="#" class="downlink">Title</a></li>
				 </ul>
			  </li>
			  <li class="tablist">
			     <a href="#" class="tablink">UI Components</a>
				 
			  </li>
			  <li class="tablist">
			     <a href="#" class="tablink">Framework</a>
				 
			  </li>
			  <li class="tablist">
			     <a href="#" class="tablink">Applications</a>
				 
			  </li>
		   </ul>
		   <div id="displaytablist">
		     注意下拉菜单栏覆盖了粉红div的一部分。因为下拉菜单栏中的元素是浮动的，不能撑开无序列表框，即无需列表框是没用高度的，粉红div无视浮动的元素，直接从父元素的左上角开始占据。
		   </div>
	   </div>
	   
	   <div id="siderbarsection">
	      <!--搜索框-->
	      <div id="searchbox">
		     <form action="#" method="get" id="searchform">
			    <fieldset id="search">
			      <label for="searchwords"><img src="img/search.png" /></label>
                  <input type="text" name="searchwords" id="searchwords" value="Keywords" />
                  <input type="button" name="go" id="go" value="GO" />
			    </fieldset>
			 </form>
		  </div>
		  
		  
		  
	   </div>
	</div>
	
	
	
	<!--The footer of the index page.-->
	<div id="footer">
	   <ul id="footernavbar">
	     <li><a href="index.html" class="navlink">首页</a></li>
		 <li><a href="index.html" class="navlink">文章</a></li>
		 <li><a href="index.html" class="navlink">作品</a></li>
		 <li><a href="index.html" class="navlink">关于</a></li>
	   </ul>
	   
	   <div id="reference">
	      <ul class="referencenav">
		    <h4>学习资料</h4>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
		  </ul>
		  
          <ul class="referencenav">
		    <h4>友情链接</h4>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
		  </ul>
		  
		  <ul class="referencenav">
		    <h4>学习资料</h4>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
		  </ul>
		  
		  <ul class="referencenav">
		    <h4>友情链接</h4>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
		  </ul>
		  
		  <ul class="referencenav">
		    <h4>学习资料</h4>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
			<li><a href="#" class="referencelink">LINK</a></li>
		  </ul>
	   </div>
	   
	   <div id="footermassage">
	        <p>版权信息</p>
			<a href="https://github.com/"><img src="img/icon-github.png" /></a>
	   </div>
	   
	</div>
	
	
    <script>
       function hiddenGithub() {
	      var html = document.documentElement;
		  var githublogo = document.getElementById("githublogo");
		  
		  if(html.clientWidth<1050) {
		    githublogo.style.display = "none";
		  } else {
		    githublogo.style.display = "block";
		  }
	   }
	   window.onresize=function() {hiddenGithub();};
    </script>
  </body>
</html>
